<template>
    <header>
        {{ $route.meta.title ? $route.meta.title : '我的电影 - App' }}
        <span @click="$router.push('/city')" v-show="$route.path === '/cinemas'" class="city">{{ cityname }}</span>
    </header>
</template>

<script>
import {mapState} from 'vuex'
export default {
    computed:{
        ...mapState(['cityname'])
    }
}
</script>

<style lang="less" scoped>
@import '../assets/Less/common.less';

header {
    height: 50px;
    background-color: @main_color;
    color: #fff;
    .flex();

    .city {
        margin-left: 15px;
        background-color: #fff;
        padding: 3px 5px;
        border-radius: 3px;
        color: @main_color;
        font-size: @mini_font_size;
    }
}
</style>